<!-- 工具条 -->
<template>
  <div>
    <el-button-group class="ml-4 top-tool-bar">
      <ElButton
        :icon="List"
        class="zz-tool-btn"
        color="#0008"
        type="primary"
        v-for="item in buttonlist"
        :key="item.key"
        @click="onBtnClick(item)"
      >
        {{ item.name }}
      </ElButton>
      <el-dropdown placement="bottom-end" trigger="click" class="zz-tool-btn">
        <el-button class="tool-dropdown" :icon="Tools">地图工具</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in toollist" :key="item.key" @click="onBtnClick(item)">
              <i :class="item.icon"></i>
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-button-group>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus';
import { openComponent } from '@/common/DzModalService';
import { defineAsyncComponent } from 'vue';
import { useViewer } from '@/stores/viewer';
import { Tools, List } from '@element-plus/icons-vue';

const buttonlist = [
  { name: '图层', key: '图层', dialog: defineAsyncComponent(() => import(`../components/LayerTree.vue`)) },
  { name: '添加', key: '添加', dialog: defineAsyncComponent(() => import(`../components/Add3DTiles.vue`)) },
  { name: '添加GeoJson', key: '添加GeoJson', dialog: defineAsyncComponent(() => import(`../components/AddGeojson.vue`)) },
  { name: '属性', key: '属性', dialog: defineAsyncComponent(() => import(`../components/Property.vue`)) },
  {
    name: '修改底图',
    key: '修改底图',
    icon: 'fa fa-list',
    dialog: defineAsyncComponent(() => import(`../components/MapTerrainChange.vue`)),
    props: { closeIfExist: true }
  },
  {
    name: '初始视角',
    key: '初始视角',
    icon: 'fa fa-home',
    command: () => {
      useViewer().viewer.zz.centerAtHome();
    }
  }
];

const toollist = [
  {
    name: '图上量算',
    key: '图上量算',
    icon: 'fa fa-calculator',
    dialog: defineAsyncComponent(() => import('../components/tools/measure/index.vue'))
  },
  {
    name: '空间分析',
    key: '空间分析',
    icon: 'fa fa-bar-chart',
    dialog: defineAsyncComponent(() => import('../components/tools/analysis/index.vue'))
  },

  {
    name: '坐标定位',
    key: '坐标定位',
    icon: 'fa fa-map-pin',
    dialog: defineAsyncComponent(() => import('../components/tools/location.vue'))
  },
  {
    name: '地区导航',
    key: '地区导航',
    icon: 'fa fa-paper-plane',
    dialog: defineAsyncComponent(() => import('../components/tools/navXZQH/index.vue'))
  },
  {
    name: '我的标记',
    key: '我的标记',
    icon: 'fa fa-edit',
    dialog: defineAsyncComponent(() => import('../components/tools/addmarker/index.vue'))
  },
  {
    name: '视角书签',
    key: '视角书签',
    icon: 'fa fa-tags',
    dialog: defineAsyncComponent(() => import('../components/tools/bookmark/index.vue'))
  },

  {
    name: '分屏对比',
    key: '分屏对比',
    icon: 'fa fa-window-restore',
    dialog: defineAsyncComponent(() => import('../components/tools/mapCompare/index.vue')),
    props: { closeIfExist: true }
  },
  {
    name: '卷帘对比',
    key: '卷帘对比',
    icon: 'fa fa-columns',
    dialog: defineAsyncComponent(() => import('../components/tools/mapSwipe/index.vue'))
  },
  {
    name: '图上标绘',
    key: '图上标绘',
    icon: 'fa fa-object-group',
    dialog: defineAsyncComponent(() => import('../components/Plot.vue'))
  },

  {
    name: '飞行漫游',
    key: '飞行漫游',
    icon: 'fa fa-send-o',
    dialog: defineAsyncComponent(() => import('../components/tools/roamLine/index.vue'))
  },
  {
    name: '路线导航',
    key: '路线导航',
    icon: 'fa fa-level-up',
    dialog: defineAsyncComponent(() => import('../components/tools/queryRoute/index.vue'))
  },
  {
    name: '地图打印',
    key: '地图打印',
    icon: 'fa fa-print',
    dialog: defineAsyncComponent(() => import('../components/tools/print/index.vue'))
  },
  {
    name: '场景设置',
    key: '场景设置',
    icon: 'fa fa-certificate',
    dialog: defineAsyncComponent(() => import('../components/sceneConfig.vue'))
  },
  // { "name": "百度街景", "icon": "fa fa-street-view",dialog: "../components/tools/streetscape/index.vue" },
  {
    name: '三维风场',
    key: '三维风场',
    icon: 'fa fa-superpowers',
    dialog: defineAsyncComponent(() => import('../components/Windy.vue'))
  },
  {
    name: '地表抬升',
    key: '地表抬升',
    icon: 'fa fa-arrow-up',
    dialog: defineAsyncComponent(() => import('../components/TerrainHeightOffset.vue'))
  },

  {
    name: '图层列表',
    key: '图层',
    icon: 'fa fa-th-large',
    dialog: defineAsyncComponent(() => import(`../components/LayerTree.vue`))
  },
  {
    name: '添加数据',
    key: '添加',
    icon: 'fa fa-plus',
    dialog: defineAsyncComponent(() => import(`../components/Add3DTiles.vue`))
  },
  {
    name: '属性显示',
    key: '属性',
    icon: 'fa fa-archive',
    dialog: defineAsyncComponent(() => import(`../components/Property.vue`))
  },
  {
    name: '登录',
    key: '登录',
    icon: 'fa fa-sign-in',
    dialog: defineAsyncComponent(() => import(`../components/Login.vue`))
  }
];

function onBtnClick(item) {
  if (item.command) {
    item.command();
  } else {
    openComponent(item.dialog, item.key, item.props ?? {});
  }
}
</script>

<style scoped>
.top-tool-bar {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 65535;
}

.tool-dropdown {
  border: unset;
  border-left: solid 1px white;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
